<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>前端原型 - 角色详情</title>
  <link rel="stylesheet" href="../assets/wireframe.css" />
</head>
<body>
  <div class="app-shell">
    <header class="wf-header">
      <a class="wf-btn" href="./roles.html">返回</a>
      <div class="wf-title">角色详情</div>
    </header>
    <main class="wf-container">
      <!-- 角色头像和基本信息 -->
      <div class="wf-card">
        <div style="display: flex; align-items: center; margin-bottom: 16px;">
          <div style="width: 80px; height: 80px; background: #eee; border-radius: 40px; margin-right: 16px;"></div>
          <div style="flex: 1;">
            <div style="font-size: 18px; font-weight: 600; margin-bottom: 4px;">智能体名称</div>
            <div style="font-size: 12px; color: #888;">角色类型：助手</div>
          </div>
        </div>
        <div class="wf-row">
          <a class="wf-btn primary" href="./chat.html">开始对话</a>
          <button class="wf-btn">收藏</button>
        </div>
      </div>
      
      <!-- 角色介绍 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">角色介绍</div>
        <div class="wf-row">
          <div class="wf-skeleton" style="width:100%"></div>
        </div>
        <div class="wf-row" style="margin-top:8px">
          <div class="wf-skeleton" style="width:90%"></div>
        </div>
        <div class="wf-row" style="margin-top:8px">
          <div class="wf-skeleton" style="width:75%"></div>
        </div>
      </div>
      
      <!-- 功能特点 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">功能特点</div>
        <div class="wf-grid">
          <div class="col-6"><div class="wf-card"><div class="wf-section-title">智能对话</div><div class="wf-skeleton" style="height:60px"></div></div></div>
          <div class="col-6"><div class="wf-card"><div class="wf-section-title">知识问答</div><div class="wf-skeleton" style="height:60px"></div></div></div>
          <div class="col-6"><div class="wf-card"><div class="wf-section-title">创意写作</div><div class="wf-skeleton" style="height:60px"></div></div></div>
          <div class="col-6"><div class="wf-card"><div class="wf-section-title">学习辅导</div><div class="wf-skeleton" style="height:60px"></div></div></div>
        </div>
      </div>
    </main>
  </div>
  <script src="../assets/wireframe.js"></script>
</body>
</html>


